<template>
	<view class="content">
		<!-- 导航栏 -->
		<uni-nav-bar class="nav-bar" background-color="#6b8bf3" :border="false">
			<view v-slot="left" style="color: #d3dcff; font-size:40rpx;" @click="showDrawer"
				class="iconfont icon-fenlei"></view>
			<view v-slot="right" style="color: #d3dcff; font-size:40rpx;" class="iconfont icon-shezhi"
				@click="jump('/pages/setUp/setUp')"></view>
		</uni-nav-bar>
		<!-- 我的头像区域 -->
		<view class="bg-img">
			<image class="my-bg-img" src="../../static/img/my-bg.png" mode="" @click="jump('/pages/my/editorialMaterial/editorialMaterial')"></image>
			<text class="my-bg-oneText">西瓜</text>
			<text class="my-bg-twoText">世界那么大，我想出去走走~</text>
		</view>
		<!-- 侧边栏 -->
		<Mydrawer ref="Mydrawer"></Mydrawer>
		<view class="to-card">
			<uni-card class="card-one" :is-shadow="false" margin="0" spacing="0" :border="false"></uni-card>
			<uni-card class="card-two" :is-shadow="false" margin="0" spacing="0" :border="false"></uni-card>
			<uni-card class="card-three" :is-shadow="false" margin="0" spacing="0" :border="false">
				<view class="indent">
					<text>321K</text>
					<text>关注</text>
				</view>
				<view class="indent">
					<text>298</text>
					<text>粉丝</text>
				</view>
				<view class="indent">
					<text>438</text>
					<text>经验值</text>
				</view>
				<view class="indent">
					<button class="indent-btn">我的订单</button>
				</view>
			</uni-card>
		</view>
		<!-- 旅游攻略 -->
		<TourIntroduction ref="TourIntroduction"></TourIntroduction>
		<TravelNotes></TravelNotes>
		<Answer></Answer>
		<view class="footer">
			<uni-load-more status="loading" iconType="auto" :showIcon="true"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import Mydrawer from '@/components/my/myDrawer/myDrawer.vue'
	import TourIntroduction from '@/components/my/tourIntroduction/TourIntroduction.vue'
	import TravelNotes from '@/components/my/TravelNotes/TravelNotes.vue'
	import Answer from '@/components/my/answer/answer.vue'
	export default {
		data() {
			return {}
		},
		components: {
			Mydrawer,
			TourIntroduction,
			TravelNotes,
			Answer
		},
		onLoad() {
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url
				});
			},
			showDrawer() {
				this.$refs['Mydrawer'].$refs['showRight'].open()
			},


		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		width: 750rpx;
		display: block;
		color: #000;

		// ::v-deep 样式穿透
		::v-deep .uni-navbar__content {
			display: block;

			.uni-navbar__header-btns {
				display: none;
			}

			.uni-navbar__header-container {
				display: flex;
				width: 750rpx;
				align-items: center;
				justify-content: space-between;
			}
		}
	}

	.bg-img {
		width: 750rpx;
		height: 600rpx;
		background-color: #6b8bf3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;

		.my-bg-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
		}

		text {
			margin-bottom: 20rpx;
		}

		.my-bg-oneText {
			font-size: 60rpx;
		}

	}

	.to-card {
		position: relative;
		top: -10rpx;
		width: 750rpx;
		height: 200rpx;
		padding: 0;
		background-color: #6b8bf3;

		.card-one {
			width: 650rpx;
			height: 200rpx;
			position: absolute;
			left: 50rpx;
			top: -50rpx;
			border-radius: 25rpx;
			background-color: rgba(178, 193, 255, .5);
			z-index: 1;
		}

		.card-two {
			width: 700rpx;
			height: 200rpx;
			position: absolute;
			left: 25rpx;
			top: -25rpx;
			border-radius: 25rpx;
			background-color: rgba(216, 224, 255, .8);
			z-index: 2;
		}

		.card-three {
			width: 750rpx;
			height: 200rpx;
			position: absolute;
			border-radius: 25rpx 25rpx 0 0;
			background-color: #ffffff;
			z-index: 3;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
	}
	::v-deep .uni-card__content{
	width: 750rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.indent{
		display: flex;
		align-items: center;
		font-size: 26rpx;
		justify-content: space-between;
		flex-direction: column;
		text:first-child{
			color: #000;
			margin-bottom: 10rpx;
			font-size: 35rpx;
		}
	}	
	}
	
	.indent-btn{
		width: 200rpx;
		height: 90rpx;
		color: #5577ff;
		border-radius: 15rpx;
		background-color: rgba(178, 193, 255, .3);
		font-weight: bold;
	}
	.footer{
		width: 750rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}
</style>
